<template>
    <div class="wutong-pool">
      <div class="header-ban">
        <img class="banner1" src="@/assets/images/banner.png" alt="">
        <img class="banner2" src="@/assets/images/bannerfu.png" alt="">
      </div>
      <div class="card-box">
        <div class="tips">
          <div class="name-wel">{{ myRealName }}</div>
          <div class="tubiao" v-if="myRoleName">
            <div class="rczy">{{ myRoleName }}</div>
            <div class="pxsbx"></div>
          </div>
          <div class="see-intro" @click="jump({ path: '/CompanyInfo', query: { status: 0 } })" >查看信息</div>
        </div>
        <div class="dv1">
          <img class="img1" src="@/assets/images/shijian.png" alt="">
          <span>事件总览</span>
        </div>
        <div class="dv2">
          <div class="menu-item" @click="jump({ path: '/CompanyInfo', query: { status: 2 } })">
            <div class="count">{{projectsNum}}</div>
            <div class="info">项目信息</div>
          </div>
          <div class="menu-item" @click="jump({ path: '/CompanyInfo', query: { status: 1 } })">
            <div class="count">{{talentNum}}</div>
            <div class="info">人才信息</div>
          </div>
          <div class="menu-item" @click="jump({ path: '/Approval', query: { status: 1 } })">
            <div class="count">{{talentwshNum}}</div>
            <div class="info">待审核信息</div>
          </div>
        </div>
        <div class="dv3" @click="jump({ path: '/DataStatistics' })">
          <div class="fenxi">
            <div class="fx1">数据分析</div>
            <div class="fx2">对梧桐人才信息进行数据统计分析</div>
          </div>
          <img class="imgfx" src="@/assets/images/fenxi.png" alt="">
        </div>
      </div>
      <Loading :loading="loading"></Loading>
    </div>
  </template>
  
  <script setup>
  
  import { ref, watch, toRefs, onMounted } from 'vue';
  import { getProjectList,getTalentList,getUserInfo } from '@/api/company.js';
  import { login } from '@/api/index.js';
  import { useRoute,useRouter } from 'vue-router';
  const loading = ref(false)
  
  // localStorage.setItem('token', 'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiJhZG1pbiIsInNjb3BlIjpbImFsbCJdLCJzaW5nbGVMb2dpbiI6MiwiZXhwIjoxNzIwMTUwMzUyLCJhdXRob3JpdGllcyI6WyJpc0FkbWluIl0sImp0aSI6IkpDWmNseGtFM0JRUFZ4UnB2SURudlFCZHBCZyIsImNsaWVudF9pZCI6ImFkbWluIiwidG9rZW4iOiJsb2dpbl90b2tlbl81Nzg4NDIyNjUxMjkxMDY2MjkifQ.etsCovTtg_XKyLNBFDEdp1XvGLKW74deTfQ2DWj7FgXH_ia0AXDVHhW1bnrRZb3_z_TgYyDaKjc6pp3jyPZ2DswtkvlwwdkOCRMMoIO4pV6aFg18nStlem68FuygxdCmlmmp0zGFL0QXJqsMIaMoBf4q6T5C_EmX5mvplrUjxNiryGadUuXvsrEiJnQu5Lo0ETDqbb9f09Qg_K1mXQYR5KbmudlRqIjv_7sDpn6gyl5A9rnhEeU7VLcsClrs-DvNkmwEsaS07WZB2T6kTTKq02RKqGfD_Dgxfj-9Gc5Wq1zSx_FGzjiWFhHCJLW5g11MeBVoxH-pY-MPuT9y1Eeevg');
  
  const getTicket = () => {
    lightAppJssdk.user.getTicket ({
        success:function(res){ //成功回调
          console.log('getTicket-res:',res);
          if(res == '未登录'){
            taiztLoginApi()
          }else{
            const { data } = JSON.parse(res)
            console.log('getTicket-data:',data);
            let jsonparsedata = JSON.parse(data)
            console.log('jsonparsedata1:',jsonparsedata);
            const { ticket } = jsonparsedata
            console.log('ticket1:',ticket);
            resolveToken(ticket)
          }
        },
        fail:function(res){ //错误返回
          console.log('111fail-res:',res);
      }
    });
  }
  
  const taiztLoginApi = () => {
    lightAppJssdk.user.loginapp ({
        success:function(res){ //成功回调
          const { data } = JSON.parse(res)
          console.log('login-api-data:',data);
          let jsonparsedata = JSON.parse(data)
          console.log('jsonparsedata2:',jsonparsedata);
          const { ticket } = jsonparsedata
          console.log('ticket2:',ticket);
          resolveToken(ticket)
        },
        fail:function(res){ //错误返回
          console.log('login-fail-res:',res);
        }
     });
  }
  
  //  获取code,获取token
  const resolveToken = async (ticket) => {
    const params = {
      account: '13016960215',
      password: 'a3420497643ef9a58b6cd83961a9f96c',
      origin: 'password',
      client_id: 'admin',
      client_secret: '123456',
      scope: 'all',
      grant_type: 'taizhoutong',
      // grant_type: 'password',
      code: ticket,
      timestamp: new Date().getTime()
    }
    console.log('params:',params);
    //  登录 获取 token
    const { code, data, msg } = await login(params);
    console.log('code:',code);
    console.log('msg:',msg);
    console.log('data:',data);
    if (code === 200) {
      const token = data.token;
      if (token) {
        console.log('token:',token);
        localStorage.setItem('token', token);
        getProject()
        getTalent()
        getTalentwsh()
        getCurrentUser()
      }
    }else{
   }
  }
  
  loading.value = true;
  const myRealName = ref('');
  const myRoleName = ref('');
  const getCurrentUser= async () => {
    const { code, data } = await getUserInfo();
    loading.value = false;
    if (code === 200) {
      myRealName.value = data.userInfo.userName + '，您好！'
      myRoleName.value = data.userInfo.roleName
    }
  }
  
  loading.value = true;
  const projectsNum = ref(null)
  const getProject = async () => {
    const { code, data } = await getProjectList({
      currentPage: 1,
      pageSize: 20,
    });
    loading.value = false;
    if (code === 200) {
      projectsNum.value = data.list.length;
    }
  }
  
  loading.value = true;
  const talentNum = ref(null)
  const getTalent = async () => {
    const { code, data } = await getTalentList({
      currentPage: 1,
      pageSize: 20,
      // companyId: "91321200MACTU4PJ4N" 
    });
    loading.value = false;
    if (code === 200) {
      talentNum.value = data.list.length;
    }
  }
  
  loading.value = true;
  const talentwshNum = ref(null)
  const getTalentwsh = async () => {
    const { code, data } = await getTalentList({
      currentPage: 1,
      pageSize: 20,
      // companyId: "91321200MACTU4PJ4N",
      auditStatus: '0'
    });
    loading.value = false;
    if (code === 200) {
      talentwshNum.value = data.list.length;
    }
  }
  
  
  onMounted(() => {
    // getTicket()
    
      getProject()
      getTalent()
      getTalentwsh()
      getCurrentUser()
  })
  
  const router = new useRouter();
  //  页面跳转
  const jump = (options) => {
    router.push(options);
  }
  
  </script>
  
  <style lang="scss" scoped>
  .wutong-pool {
    box-sizing: border-box;
    height: 100%;
    background: #fff;
  
    .header-ban{
      position: relative;
  
      .banner1{
        width: 100vw;
        height: 20rem;
      }
      .banner2{
        position: absolute;
        right: 1rem;
        top: 1.1rem;
        width: 12.3rem;
      }
    }
    .card-box{
    width: 94%;
    height: 30.7rem;
    border-radius: 5px;
    background: #FFFFFF;
    position: absolute;
    top: 15.5rem;
    padding: 0.9rem 1.4rem 1.4rem;
    box-sizing: border-box;
    left: 3%;
    box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.1);
  
      .tips{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
  
        .name-wel{
          font-size: 1.3rem;
          font-weight: 700;
          color: #333333;
          margin-top: 0.5rem;
        }
        .tubiao{
          display: flex;
          align-items: center;
          margin-top: 0.5rem;
  
          .rczy {
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            background: linear-gradient(90deg, #FFE7C6 0%, #FDEFE3 100%);
            transform: skew(-20deg);
            color: #FF8D1A;
            display: inline-block;
            font-size: 1.2rem;
            padding: 0 0.2rem;
          }
          .pxsbx{
            width: 0.8rem;
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            background: #FDF0E5;
            transform: skew(-20deg);
            display: inline-block;
            margin-left: 0.3rem;
          }
        }
        .see-intro{
          font-size: 1.4rem;
          font-weight: 400;
          line-height: 1.4rem;
          color: rgba(14, 83, 204, 1);
          margin-top: 0.5rem;
        }
      }
      .dv1{
        font-size: 1.4rem;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        margin-top: 2rem;
  
        .img1{
          width: 16px;
          height: 16px;
          margin-right: 1rem;
        }
      }
      .dv2{
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 1.8rem;
        padding-bottom: 2.2rem;
        border-bottom: 1px solid #F2F2F4;
  
        .menu-item{
          text-align: center;
        }
        .count{
          color: #2A46CC;
          font-size: 2.4rem;
          font-weight: 700;
        }
        .info{
          color: #666666;
        }
      }
      .dv3{
        display: flex;
        align-items: center;
        padding: 2rem;
        border-radius: 5px;
        background: #F2F6FF;
        margin-top: 2rem;
  
        .fenxi{
  
          .fx1{
            font-size: 2.4rem;
            font-weight: 700;
            color: #0E53CC;
            margin-bottom: 0.4rem;
          }
          .fx2{
            font-size: 1.2rem;
            font-weight: 400;
            color: #999999;
  
          }
  
        }
        .imgfx{
          width: 7rem;
          height: 7rem;
          margin-left: 2rem;
        }
      }
    }
  }
  </style>